<template>
  <van-nav-bar fixed placeholder @click-left="handleLeftClick" @click-right="handleRightClick">
    <template #left>
      <van-icon name="arrow-left" color="#000" size="18" />
    </template>
    <template #title>
      <van-search v-model="input" :placeholder="searchPlaceholder" :clearable="false" />
    </template>
    <template #right>
      <van-icon name="delete-o" color="#000" size="18" />
    </template>
  </van-nav-bar>
  <div class="section">
    <div class="history" v-if="currentSearchHistory.length > 0">
      <span class="history-title">最近搜索：</span>
      <van-tag
        text-color="#999"
        size="medium"
        plain
        v-for="(item, index) in currentSearchHistory"
        :key="index"
        closeable
        @close="handleTagClose(item)"
        @click="handleTagClick(item)"
        >{{ item }}</van-tag
      >
    </div>
    <div class="hotkey">
      <span class="hotkey-title">大家都在搜：</span>
      <van-tag
        text-color="#999"
        size="medium"
        color="#ec4141"
        plain
        v-for="(item, index) in searchHotkeys"
        :key="index"
        @click="handleTagClick(item)"
        >{{ item.searchWord }}</van-tag
      >
    </div>
    <div class="loading" v-if="loading && input">
      <van-loading size="24px" vertical>加载中...</van-loading>
    </div>
    <div class="result" v-if="searchResult.length != 0">
      <span class="result-title">搜索结果：</span>
      <van-song-list :songs="searchResult" layout="1" @handleItemClick="handlePlay"></van-song-list>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import VanSongList from '@/components/songlist/SongList.vue';
import { useMyStores } from '@/store';

import { getSearch, getSearchDefault, getSearchHotDetail } from '@/api/wangyi/search';
import { createSong } from '@/assets/js/song';
import { debounce, isEmpty } from 'lodash';

const { playerStore, currentSearchHistory } = useMyStores();
const handleLeftClick = () => {
  history.back();
};
const handleRightClick = () => {
  input.value = '';
};

const input = ref('');
watch(input, newVal => {
  // console.log(isEmpty(newVal), isNull(newVal));
  if (isEmpty(newVal)) {
    searchResult.value = [];
  } else {
    handleSearch();
  }
});

const searchPlaceholder = ref('');
const searchHotkeys = ref<any>([]);
const searchResult = ref<any>([]);
const loading = ref(true);

onMounted(() => {
  // 1.获取默认搜索关键词
  getSearchDefault().then(res => {
    // console.log(res);
    searchPlaceholder.value = res.data.showKeyword;
  });
  // 2.获取热搜
  getSearchHotDetail().then(res => {
    // console.log(res);
    searchHotkeys.value = res.data;
  });
});

const handleTagClick = (item: any) => {
  input.value = item.searchWord || item;
};

const handleTagClose = (item: any) => {
  playerStore.DEL_CURRENT_SEARCH_HISTORY(false, item);
};

const handleSearch = debounce(() => {
  // console.log(input.value);
  if (isEmpty(input.value)) return;
  getSearch({ keywords: input.value }).then(res => {
    // console.log(res);
    // 歌曲列表
    let tracks = res.result.songs;
    let songs = [];
    for (let i = 0; i < tracks.length; i++) {
      songs.push(createSong(tracks[i]));
    }
    searchResult.value = songs;
    loading.value = false;
    // 添加搜索历史
    playerStore.SET_CURRENT_SEARCH_HISTORY(input.value);
  });
}, 1000);

// 播放
const handlePlay = (index: number) => {
  // 存储播放列表数据
  playerStore.SET_CURRENT_PLAY_LIST(searchResult.value);
  playerStore.SET_SEQUENCE_LIST(searchResult.value);

  playerStore.SET_FULL_PLAYER(true);
  playerStore.SET_MINI_PLAYER(false);

  // 改变播放索引
  playerStore.SET_CURRENT_PLAY_INDEX(index);
  // 改变播放状态
  playerStore.SET_AUDIO_PLAY_STATE(true);
};
</script>

<style lang="less" scoped>
:deep(.van-nav-bar__title ){
  max-width: 100%;
  width: 90%;
  margin-left: 32px;
  margin-right: 32px;
}

.section {
  padding: 5px 10px;
  .history {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 0 0;
    .history-title {
      font-size: 14px;
    }
    span {
      margin-right: 8px;
      margin-bottom: 8px;
      border-radius: 5px;
    }
  }
  .hotkey {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 0;
    .hotkey-title {
      font-size: 14px;
    }
    span {
      margin-right: 8px;
      margin-bottom: 8px;
      border-radius: 5px;
    }
  }

  .result {
    .result-title {
      font-size: 14px;
    }
    :deep(.van-cell) {
      padding: 8px 5px;
    }
  }
}
</style>
